{{ define "css"}}
{{/*    <link href="https://1024casts.com/css/github-markdown.css" rel="stylesheet">*/}}
    {{include "common/highlight-css-all"}}
    <style type="text/css">
        /*body {*/
        /*    background: #e5e5e5;*/
        /*}*/
        .subtitle {
            padding-top: 0.5rem;
            color: #969696;
        }
        .subtitle{
            font-size: 14px;
        }
        .media-content {
            font-size: 15px;
        }
    </style>
{{ end }}

{{define "content"}}
    <div class="container" style="padding: 2rem 0rem;">
        {{include "partials/error"}}
        <div class="columns">
            <div class="column is-12">
                <article class="media box">
                    <div class="media-content">
                        <div class="content">
                            <h1 class="title is-4">
                                {{.topic.Title}}
                            </h1>
                            <p class="subtitle">
                                <span class="tag">
                                    {{.topic.Category.Name}}
                                </span>
                                <a data-author="true" data-name="{{.topic.User.Username}}" href="/users/{{.topic.User.Username}}">
                                    {{.topic.User.Username}}
                                </a>
                                ·
                                <abbr class="timeago" title="{{.topic.CreatedAt}}">{{.topic.CreatedAt}}</abbr>
                                {{if gt .topic.LastReplyUserId 0}}
                                    <span class="hidden-mobile"> ·
                                        最后由 <a class="subtitle is-6" data-name="{{.topic.LastReplyUser.Username}}" href="/users/{{.topic.LastReplyUser.Username}}">{{.topic.LastReplyUser.Username}}</a>
                                        回复于 <abbr class="timeago" title="{{.topic.LastReplyTimeAt}}">{{.topic.LastReplyTimeAt}}</abbr>
                                        </span>
                                {{end}}
                                · {{.topic.ViewCount}} 次阅读
                                {{if eq .user_id .topic.User.Id}}
                                · <a href="/topic/edit/{{.topic.Id}}">编辑</a>
                                {{end}}
                            </p>
                            <hr>
                        </div>
                        <div class="content">
                            {{.topic.Body}}
                        </div>
                    </div>
                </article>

                {{if gt .topic.ReplyCount 0}}
                <div id="replies" class="box">
                    <h3>共收到 <strong>{{.topic.ReplyCount}}</strong> 条回复</h3>
                    <hr>
                    {{ range $index, $value := .replies}}
                        <article class="media">
                            <figure class="media-left">
                                <p class="image is-48x48">
                                    <img class="is-rounded" src="{{.ReplyUserInfo.Avatar}}">
                                </p>
                            </figure>
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>{{.ReplyUserInfo.Username}}</strong> <small>{{.CreatedAt}}</small>
                                        <br>
                                        {{.Body}}
                                    </p>
                                </div>
                                <nav class="level is-mobile">
                                    <div class="level-left">
                                        <a class="level-item" href="javascript:;" @click="likeComment($event, {{ .Id }})">
                                            <span class="icon is-small">
                                                <i class="far fa-thumbs-up"></i>{{.LikeCount}}
                                            </span>
                                        </a>
                                        <a class="level-item" href="javascript:;" @click="replyUser($event, '{{.ReplyUserInfo.Username}}')">
                                            <span class="icon is-small"><i class="fas fa-reply"></i></span>
                                        </a>
                                    </div>
                                </nav>
                            </div>
                        </article>
                    {{end}}
                </div>
                {{end}}

                <div id="reply_box" class="box">
                    <article class="media">
                        <figure class="media-left">
                            <p class="image is-48x48">
                                <img src="{{.user.Avatar}}">
                            </p>
                        </figure>
                        <div class="media-content">
                            <div class="field">
                                <p class="control">
                                    <textarea v-model="content" id="reply_content" name="content" class="textarea" placeholder="支持Markdown格式"></textarea>
                                </p>
                            </div>
                            <nav class="level">
                                <div class="level-right">
                                    <div class="level-item">
                                        <button class="button is-info" @click="submitComment">提交评论</button>
                                    </div>
                                </div>
                            </nav>
                        </div>
                    </article>
                </div>
            </div>
{{/*            <div class="column is-3">*/}}
{{/*                <article class="media box">*/}}
{{/*                    <div class="media-content">*/}}
{{/*                        <div class="content">*/}}
{{/*                            <h2 class="title is-6">热门帖子</h2>*/}}
{{/*                            <hr>*/}}
{{/*                            {{range .topTopics}}*/}}
{{/*                            <p>*/}}
{{/*                                <a style="font-size: 0.9rem;" href="/topics/{{.Id}}">{{.Title}}</a> - <span class="has-text-grey">{{.ViewCount}}阅读</span>*/}}
{{/*                            </p>*/}}
{{/*                            {{end}}*/}}
{{/*                        </div>*/}}
{{/*                    </div>*/}}
{{/*                </article>*/}}
{{/*            </div>*/}}
        </div>
    </div>
{{end}}

{{ define "js"}}
    {{include "common/highlight-js-all"}}
    <script src="https://cdn.bootcss.com/marked/0.6.2/marked.min.js"></script>
    <script src="https://cdn.bootcss.com/limonte-sweetalert2/7.33.1/sweetalert2.all.min.js"></script>
    <script type="text/javascript">
        var reply_box = new Vue({
            el: '#reply_box',
            data: {
                content: '',
            },
            delimiters:['${', '}'],
            methods: {
                submitComment: function (e) {
                    e.preventDefault();
                    if (this.content === '') {
                        swal("请正确填写评论！", "","warning");
                        return false;
                    }
                    var bodyFormData = new FormData();
                    bodyFormData.set("topic_id", {{.topic.Id}});
                    bodyFormData.set("origin_body", this.content);
                    bodyFormData.set("body", marked(this.content));
                    let config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    };
                    this.$http.post("/topics/reply", bodyFormData, config).then((response) => {
                        console.log(response);
                        if (response.data.code === 0) {
                            // http://mishengqiang.com/sweetalert/
                            swal("更新成功！", "","success");
                            return true;
                        } else {
                            swal("修改失败！", "","error");
                            return false;
                        }
                    }).catch( error => {
                        console.log(error);
                    });
                }
            }
        });

        var app = new Vue({
            el: '#replies',
            data: {
                content: '',
            },
            delimiters:['${', '}'],
            methods: {
                likeComment: function (e, replyId) {
                    var bodyFormData = new FormData();
                    bodyFormData.set('reply_id', replyId);
                    let config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    };
                    this.$http.post("/topics/like/" + replyId, bodyFormData, config).then((response) => {
                        if (response.data.code === 0) {
                            // 更新数量
                            swal("点赞成功！", "","success");
                            return true;
                        } else {
                            return false;
                        }
                    }).catch( error => {
                        console.log(error);
                    });
                },
                replyUser: function (e, username) {
                    var replyContent = $('#reply_content');
                    var oldContent = replyContent.val();
                    var lastAtUser = "@" + username + " ";
                    var newContent = '';
                    if (oldContent.length > 0) {
                        if (oldContent !== lastAtUser) {
                            newContent = oldContent + "\n" + lastAtUser;
                        }
                    } else {
                        newContent = lastAtUser;
                    }

                    replyContent.focus();
                    replyContent.val(newContent);
                }
            }
        });
        </script>
{{ end }}